const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // CSS文件单独提取出来
const glob = require('glob');
const PurifycssWebpack = require('purifycss-webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const website = {};
if (process.env.type === 'dev') {
  website.publicPath = 'http://192.168.5.121:3033/';
} else if (process.env.type === 'prodution') {
  website.publicPath = 'http://cdn.jspang.com/';
}
module.exports = {
  devtool: 'eval-source-map', // 开发时可以加上，生产环境下一定要修改，具体视场景而定
  entry: {
    bundle1: './src/main1.js',
    bundle2: './src/mian2.js',
    jquery: 'jquery',
    vue: 'vue',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),  // __dirname: 是webpack的上级目录即demo1('/')，必须是绝对路径
    filename: '[name]-[contenthash].js',
    publicPath: website.publicPath,
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      use: 'babel-loader',
      exclude: /node_modules/,
    }, {
      test: /\.css$/,
      // 三种写法
      // use: ['style-loader', 'css-loader'],
      // loader: ['style-loader', 'css-loader']
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
    }, {
      test: /\.less$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }, {
      test: /\.scss$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    }, {
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 8192,
          // outputPath: 'images'  // dist下的目录
        }
      }
    }, {
      test: /\.(htm|html)$/i,
      use: 'html-withimg-loader',
    }]
  },
  plugins: [
    new UglifyJsPlugin(), // 打包压缩js
    new HtmlWebpackPlugin({
      template: './src/index.html', // 要打包的html模板路径和名称
      hash: true, // hash，为了开发中js有缓存效果
      minify: { // 对html文件进行压缩
        removeAttributeQuotes: true, // 去掉属性的双引号
      }
    }),
    new MiniCssExtractPlugin({
      filename: `[name]-[contenthash].css`, 
    }),
    new PurifycssWebpack({
      paths: glob.sync(path.join(__dirname, 'src/*html')), // 这列插件要配合分离css的插件使用，否则无效
    }),
    new webpack.ProvidePlugin({
      $: 'jquery', // 全局引入插件
    }),
    new webpack.BannerPlugin('chensai版权所有'), // 在打包的每个文件的顶部显示
    new CopyWebpackPlugin([{
      from: path.join(__dirname, 'src/public'),
      to: './public',
    }])
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 启动目录,必须是绝对路径，最好和output的path一样
    host: '192.168.5.121', // 主机名
    port: '3033', // 端口
    compress: true, // 开启服务器压缩
  },
  watchOptions: {
    poll: 1000,
    aggregateTimeout: 500,
    ignored: /node_modules/,
  },
  optimization: { // 这里是替代的new webpack.CommonsChunkPlugin()实例，v4版本已经废弃掉了
    splitChunks: {
      chunks: "async",
      name: () => {
        return ['vue', 'jquery']
      },
      filename: 'assets/js/jquery.js', // 可省略
      minChunks: 2, // 固定配置，必须写，一般都是2
    }
  },
}